<template>
    <div class="pub-main">
        <sy-header></sy-header>
        <div class="p-main">
           <el-col class="section1 posr">
               <div class="posa">
                   <h3 class="mb30">劳动教育云线上平台</h3>
                   <span class="title">劳动教育课程,教、学、做、评、展一体化平台</span>
               </div>
           </el-col>
           <el-col class="section2 posr box box-align-center box-pack-center">
               <div class="content box box-tb box-align-center box-pack-between">
                   <h3>超过1000家学校正在使用</h3>
                   <span class="title1">学生用户达到10000以上</span>
                   <span class="title2">劳动教育平台线上免费体验，劳动课程备课、实践打卡、教研组、评分小组等功能全面开放</span>
                   <el-button type="primary">立即试用</el-button>
               </div>
           </el-col>
           <span>放一个方案图</span>
           <el-col class="section3 posr">
           </el-col>
           <el-col class="section4 posr">
           </el-col>
           <el-col class="section5 posr">
           </el-col>
            <footer-view></footer-view>
        </div>

    </div>
</template>

<script>
    import {
        v4 as uuidv4
    } from 'uuid';
    import footerView from './compoents/footer.vue';
    export default {
        components: {
            footerView
        },
        data() {
            return {
                loginbtnname: '登录',
                token: '',
                websock: null,
                userStatus: '',
                codeUrl: '',
                baseurl: '',
                user: {},
                form: {
                    userName: '',
                    passWord: ''
                },
                rules: {
                    userName: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }],
                    passWord: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                },
                navList: [{
                    name: '扫码登录'
                }, {
                    name: "账号登录"
                }],
                checkedVal: 0,
                imgList: [{
                    img: '../../static/image/code_bg.png'
                }, {
                    img: '../../static/image/web_bg.png'
                }],
                content: [{
                        src: '/static/image/index/index_hd.png',
                        title: '互动课堂',
                        cont: '永恒云课堂小程序辅助教学，实现课堂师生实时互动'
                    },
                    {
                        src: '/static/image/index/index_xszb.png',
                        title: '线上直播',
                        cont: '线上直播教学场景灵活，可随时随地远程教学'
                    },
                    {
                        src: '/static/image/index/index_zhjs.png',
                        title: '智慧教室',
                        cont: '基于智慧教室，软硬件结合，实现教学互联互通，实时互动'
                    }
                ]
            }
        },
        mounted() {
            let usercode= this.$route.query.usercode;
            console.log(usercode);
            // this.changeNav(0)
            //测试 获取统一身份认证用户
            // console.log('测试>>>>>获取统一身份认证用户>>>>>>');
            // this.$axios.postRequest('/comm/getRemoteUser').then(rs => {
            //     console.log(rs);
            // })
        },
        methods: {
            changeNav(n) {
                this.checkedVal = n
                if (this.checkedVal == 0) {
                    let token = this.$md5(uuidv4() + new Date().toLocaleString());
                    this.$axios.postRequest('/comm/getAppletErWeiCode', {
                        scene: encodeURIComponent(token)
                    }).then(rs => {
                        this.codeUrl = rs.url;
                        this.token = token;
                        this.initSocket(token);
                    })
                }
            },
            login() {
                this.loginbtnname = '登录中...';
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let params = {
                            usercode: this.form.userName,
                            pwd: this.form.passWord,
                        };
                        console.log(1);
                        this.$api.login.login(params).then(res => {
                            console.log(res,'登录的loginInfo信息');
                            if (res.result == "success") {
                                this.loginbtnname = '登录';
                                this.$store.commit("setLoginInfo", res);

                                // this.$store.commit("setToken", res.token);
                                localStorage.setItem('token',res.token);
                                // localStorage.setItem('permissions',res.permissions);
                                // this.$store.commit("setMaxRole", res.maxrole);
                                // this.$store.commit("setUser", res.user);
                                // this.$store.commit("setLogo", res.logoUrl);
                                // this.$store.commit("setSchoolName", res.schoolName);
                                this.$store.commit("setLogintype", 'sy');
                                //this.$message.success('登录成功');
                                switch(res.maxrole){
                                     case 'super':
                                       this.$router.push({name:'xxgl'});
                                       break;
                                     case 'admin':
                                       this.$router.push({name:'jsxx'});
                                     break;
                                     case 'jyzz':
                                       this.$router.push({name:'ldkc_jyzz'});
                                     break;
                                     case 'jyz':
                                       this.$router.push({name:'ldkc_jyzz'});
                                     break;
                                     case 'jyy':
                                       this.$router.push({name:'ldkc_jyy'});
                                     break;
                                     case 'tr':
                                       this.$router.push({name:'jxrw'});
                                     break;
                                     default:
                                      this.$router.push({name:'ldkc_jyy'});
                                       break;
                                       }

                            }else if (res.result == "none") {
                                this.$message.error('无此用户');
                                this.loginbtnname = '登录';
                            } else if (res.result == "password_error") {
                                this.$message.error('密码错误');
                                this.loginbtnname = '登录';
                            } else if (res.result == "fwdq") {
                                this.$message.error('服务已到期');
                                this.loginbtnname = '登录';
                            }else {
                                this.$message.error('无登录权限');
                                this.loginbtnname = '登录';
                            }
                        });
                    } else {
                        return false;
                    }
                });

            },
            initSocket(token) {
                // this.websock = new WebSocket(this.$axios.loginSocketUrl + this.token + "/1");
                // this.websock.onmessage = this.websocketonmessage;
                // this.websock.onopen = this.websocketonopen;
                // this.websock.onerror = this.websocketonerror;
                // this.websock.onclose = this.websocketclose;
            },
            websocketonopen() {
                //console.log("connection success!");
            },
            websocketclose(e) {

            },
            websocketonerror() { //连接建立失败重连
                this.initSocket();
            },
            websocketonmessage(e) {
                // var m=e.data.replace(/\\/g,"");
                // m=m.substring(1,m.length-1);
                const data = JSON.parse(e.data);
                switch (data.cmd) {
                    case "dcslogin":
                        console.log(data.userCode);
                        console.log(data.token);
                        this.codeLogin(data.userCode, data.token);
                        this.websock.close(); //关闭login socket
                        break;
                    default:
                        break;
                }
            },
            websocketsend(Data) { //数据发送
                this.websock.send(Data);
            },
            codeLogin(userCode, token) {
                let params = {
                    userCode: userCode,
                    token: token,
                };
                this.$axios.postRequest('/qrCodeLogin', params).then(res => {
                    switch (res.result) {
                        case "success":
                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            this.user = res.user;
                            this.user.maxRole = res.maxrole;
                            this.$store.commit("setUser", this.user);
                            this.$store.commit("setLogo", res.logoUrl);
                            this.$store.commit("setMaxRole", res.maxrole);
                            this.$store.commit("setToken", res.liveType);
                            this.$store.commit("setLogintype", 'sy'); //登录入口：云课堂首页
                            //console.log(this.$store.state.maxRole);
                            // this.$store.commit("setMenus",res.menus);
                            this.$router.push({
                                name: 'bkzx'
                            });
                            break;
                        case "none":
                            this.$message.error("无此用户");
                            break;
                        case "password_error":
                            this.$message.error("密码错误");
                            break;
                        case "limited":
                            this.$message.error("无登录权限");
                            break;
                        case "login_error":
                            this.$message.error("登录失败");
                            break;
                        case "token_err":
                            this.$message.error("token错误");
                            break;
                        default:
                            break;
                    }
                })
            }

        },
        destroyed() {
            this.websocketclose();
        }
    }
</script>
<style lang="scss" scoped>
    @import 'header.scss';
</style>
<style lang="scss" scoped>
    .pub-main {
        // display: inline-grid;

        .p-main {
            min-width: 1200px;
            height: 100%;
            overflow-y: scroll;

            .section-1 {
                height: 772px;
                background: url(../../../static/image/index/section_1.png) no-repeat top;
                background-size: cover;
                position: relative;

                .login {
                    position: absolute;
                    right: 166px;
                    top: 150px;
                    width: 414px;
                    height: 453px;
                    background-color: #ffffff;
                    box-shadow: 0px 12px 29px 0px rgba(66, 114, 246, 0.35);
                    border-radius: 12px;
                    border: solid 0px #dee3f8;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .login-form {
                        box-sizing: border-box;
                        padding: 50px 33px;
                        position: relative;
                        width: 100%;
                        height: 100%;
                        background-color: #fff;

                        .btn {
                            position: absolute;
                            right: 6px;
                            top: 6px;

                            .img {
                                cursor: pointer;
                            }
                        }

                        .nav {
                            display: flex;

                            .nav-list {
                                margin-right: 18px;
                                width: 80px;
                                height: 36px;
                                font-size: 20px;
                                color: #2e323e;
                            }
                        }

                        .login-btn {
                            width: 336px;
                            height: 42px;
                            background-color: #3a6ffe;
                            box-shadow: 0px 6px 13px -2px #3a6ffe;
                            font-size: 18px;
                        }


                        .bg-btm {
                            position: absolute;
                            bottom: -13px;
                            left: -20px;
                        }

                        &>>>.el-input__inner {
                            border: none;
                        }

                        &>>>.el-form-item {
                            // margin-bottom: 10px;
                        }

                        &>>>.el-divider--horizontal {
                            // margin: 25px 0 0 0;
                        }

                        &>>>.login-btn {
                            margin-top: 60px;
                        }

                        &>>>.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
                            color: #fff;
                        }

                        .codes {
                            position: absolute;
                            top: 60%;
                            left: 50%;
                            transform: translate(-50%, -60%);
                            width: 270px;
                            text-align: center;
                        }

                        .code {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin: 0 auto;
                            width: 217px;
                            height: 217px;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }

                }

                .checked {
                    border-bottom: 1px solid #2e323e;
                }

            }

            .section-2,
            .section-3 {
                padding: 55px 0;

                .section-top {
                    position: relative;
                    margin: 0 auto;
                    width: 180px;

                    h3 {
                        width: 100%;
                        text-align: center;
                        font-size: 28px;
                        padding-bottom: 30px;
                        z-index: 100;
                    }

                    .img {
                        position: absolute;
                        top: -43px;
                        right: -100px;
                    }

                    .img1 {
                        position: absolute;
                        top: -39px;
                        left: -100px;
                    }
                }

                // section 1
                .item {
                    height: 453px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .list {
                        cursor: default;
                        margin-right: 20px;
                        box-sizing: border-box;
                        padding: 0 50px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        width: 376px;
                        height: 333px;
                        background-color: #f0f1f9;
                        border-radius: 5px;

                        &:last-child {
                            margin-right: 0;
                        }

                        .img {
                            width: 100px;
                            height: 100px;
                        }

                        .title {
                            padding: 10px 0;
                            font-size: 24px;
                            font-weight: bold;
                            color: #2e323e;
                        }

                        .content {
                            font-size: 18px;
                            color: #5f6573;
                            text-align: center;
                        }
                    }
                }

                // section 2
                .section-main {
                    display: flex;

                    .left {
                        .el-image {
                            width: 100%;
                        }

                        flex:1;
                    }

                    .right {
                        flex: 1;

                        .main-cont {
                            box-sizing: border-box;
                            height: 100%;
                            padding-left: 60px;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            justify-content: center;

                            .cont-list {
                                padding: 10px 0;
                                display: flex;
                                flex-direction: column;

                                .icon {
                                    width: 60px;
                                    height: 30px;
                                    line-height: 30px;
                                    background-color: #fdeed5;
                                    border-radius: 4px;
                                    font-size: 18px;
                                    color: #ff9b25;
                                    text-align: center;
                                    margin-bottom: 10px;
                                }
                            }
                        }
                    }
                }
            }

            .section-3 {

                .pos {
                    position: relative;
                    height: 625px;
                    // background: url(../../../static/image/index/icon_sec3.png) no-repeat center center;
                    // background-size: 100% 100%;

                    .pos1 {
                        position: absolute;
                        top: 33%;
                        left: 18%;
                        // transform: translate(-39%,-13%);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        .cont {
                            box-sizing: border-box;
                            padding: 10px;
                            width: 150px;
                            height: 65px;

                            background-color: #ffffff;
                            border-radius: 14px;
                            border: dotted 3px #418cff;
                            font-size: 14px;
                            color: #2e323e;
                        }
                    }

                    .pos2 {
                        position: absolute;
                        top: 16%;
                        left: 33%;
                        // transform: translate(-39%,-13%);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        .cont {
                            box-sizing: border-box;
                            padding: 10px;
                            width: 200px;
                            height: 70px;

                            background-color: #ffffff;
                            border-radius: 14px;
                            border: dotted 3px #418cff;
                            font-size: 14px;
                            color: #2e323e;
                        }
                    }

                    .pos3 {
                        position: absolute;
                        top: 39%;
                        left: 70%;
                        // transform: translate(-39%,-13%);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        .cont {
                            box-sizing: border-box;
                            padding: 10px;
                            width: 230px;
                            height: 70px;

                            background-color: #ffffff;
                            border-radius: 14px;
                            border: dotted 3px #418cff;
                            font-size: 14px;
                            color: #2e323e;
                        }
                    }
                }
            }
        }
    }

    .yx {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .tel {
            margin: 40px 0;
            width: 301px;
            height: 48px;
            background-color: #5b90ff;
            border-radius: 4px;
            text-align: center;
            line-height: 48px;
            font-size: 28px;
            color: #fff;
        }
    }
</style>
